5 hovzer
= $.getFootHovzer();
7 OO
.ui
.getViewportSpacing = function () {
11 bottom
: hovzer
.$.outerHeight(),
19 * Enabled server-side through `$wgDebugToolbar`.
23 * @author John Du Hart
28 * Toolbar container element
35 * Object containing data for the debug toolbar
42 * Initialize the debugging pane
44 * Shouldn't be called before the document is ready
45 * (since it binds to elements on the page).
47 * @param {Object} [data] Defaults to 'debugInfo' from mw.config
49 init: function ( data
) {
51 this.data
= data
|| mw
.config
.get( 'debugInfo' );
54 // Insert the container into the DOM
55 hovzer
.$.append( this.$container
);
58 $( '.mw-debug-panelink' ).click( this.switchPane
);
62 * Switch between panes
64 * Should be called with an HTMLElement as its thisArg,
65 * because it's meant to be an event handler.
67 * TODO: Store cookie for last pane open.
69 * @param {jQuery.Event} e
71 switchPane: function ( e
) {
72 var currentPaneId
= debug
.$container
.data( 'currentPane' ),
73 requestedPaneId
= $( this ).prop( 'id' ).slice( 9 ),
74 $currentPane
= $( '#mw-debug-pane-' + currentPaneId
),
75 $requestedPane
= $( '#mw-debug-pane-' + requestedPaneId
),
78 function updateHov() {
85 // Skip hash fragment handling. Prevents screen from jumping.
88 $( this ).addClass( 'current ' );
89 $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ' );
91 // Hide the current pane
92 if ( requestedPaneId
=== currentPaneId
) {
93 $currentPane
.slideUp( updateHov
);
94 debug
.$container
.data( 'currentPane', null );
98 debug
.$container
.data( 'currentPane', requestedPaneId
);
100 if ( currentPaneId
=== undefined || currentPaneId
=== null ) {
101 $requestedPane
.slideDown( updateHov
);
104 $requestedPane
.show();
110 * Construct the HTML for the debugging toolbar
112 buildHtml: function () {
113 var $container
, $bits
, panes
, id
, gitInfo
;
115 $container
= $( '<div>' )
117 id
: 'mw-debug-toolbar',
121 .addClass( 'mw-debug' );
123 $bits
= $( '<div>' ).addClass( 'mw-debug-bits' );
126 * Returns a jQuery element for a debug-bit div
132 function bitDiv( id
) {
133 return $( '<div>' ).prop( {
134 id
: 'mw-debug-' + id
,
135 className
: 'mw-debug-bit'
136 } ).appendTo( $bits
);
140 * Returns a jQuery element for a pane link
144 * @param {string} text
147 function paneLabel( id
, text
) {
150 className
: 'mw-debug-panelabel',
151 href
: '#mw-debug-pane-' + id
157 * Returns a jQuery element for a debug-bit div with a for a pane link
160 * @param {string} id CSS id snippet. Will be prefixed with 'mw-debug-'
161 * @param {string} text Text to show
162 * @param {string} count Optional count to show
165 function paneTriggerBitDiv( id
, text
, count
) {
167 text
= text
+ ' (' + count
+ ')';
169 return $( '<div>' ).prop( {
170 id
: 'mw-debug-' + id
,
171 className
: 'mw-debug-bit mw-debug-panelink'
173 .append( paneLabel( id
, text
) )
177 paneTriggerBitDiv( 'console', 'Console', this.data
.log
.length
);
179 paneTriggerBitDiv( 'querylist', 'Queries', this.data
.queries
.length
);
181 paneTriggerBitDiv( 'debuglog', 'Debug log', this.data
.debugLog
.length
);
183 paneTriggerBitDiv( 'request', 'Request' );
185 paneTriggerBitDiv( 'includes', 'PHP includes', this.data
.includes
.length
);
188 if ( this.data
.gitRevision
!== false ) {
189 gitInfo
= '(' + this.data
.gitRevision
.slice( 0, 7 ) + ')';
190 if ( this.data
.gitViewUrl
!== false ) {
192 .attr( 'href', this.data
.gitViewUrl
)
197 bitDiv( 'mwversion' )
198 .append( $( '<a>' ).attr( 'href', '//www.mediawiki.org/' ).text( 'MediaWiki' ) )
199 .append( document
.createTextNode( ': ' + this.data
.mwVersion
+ ' ' ) )
202 if ( this.data
.gitBranch
!== false ) {
203 bitDiv( 'gitbranch' ).text( 'Git branch: ' + this.data
.gitBranch
);
206 bitDiv( 'phpversion' )
207 .append( this.data
.phpEngine
=== 'HHVM' ?
208 $( '<a>' ).attr( 'href', 'https://hhvm.com/' ).text( 'HHVM' ) :
209 $( '<a>' ).attr( 'href', 'https://php.net/' ).text( 'PHP' )
211 .append( ': ' + this.data
.phpVersion
);
214 .text( 'Time: ' + this.data
.time
.toFixed( 5 ) );
217 .text( 'Memory: ' + this.data
.memory
+ ' (Peak: ' + this.data
.memoryPeak
+ ')' );
219 $bits
.appendTo( $container
);
222 console
: this.buildConsoleTable(),
223 querylist
: this.buildQueryTable(),
224 debuglog
: this.buildDebugLogTable(),
225 request
: this.buildRequestPane(),
226 includes
: this.buildIncludesPane()
229 for ( id
in panes
) {
232 className
: 'mw-debug-pane',
233 id
: 'mw-debug-pane-' + id
235 .append( panes
[ id
] )
236 .appendTo( $container
);
239 this.$container
= $container
;
243 * Build the console panel
245 * @return {jQuery} Console panel
247 buildConsoleTable: function () {
248 var $table
, entryTypeText
, i
, length
, entry
;
250 $table
= $( '<table>' ).attr( 'id', 'mw-debug-console' );
252 $( '<colgroup>' ).css( 'width', /* padding = */ 20 + ( 10 * /* fontSize = */ 11 ) ).appendTo( $table
);
253 $( '<colgroup>' ).appendTo( $table
);
254 $( '<colgroup>' ).css( 'width', 350 ).appendTo( $table
);
256 entryTypeText = function ( entryType
) {
257 switch ( entryType
) {
269 for ( i
= 0, length
= this.data
.log
.length
; i
< length
; i
+= 1 ) {
270 entry
= this.data
.log
[ i
];
271 entry
.typeText
= entryTypeText( entry
.type
);
275 .text( entry
.typeText
)
276 .addClass( 'mw-debug-console-' + entry
.type
)
278 .append( $( '<td>' ).html( entry
.msg
) )
279 .append( $( '<td>' ).text( entry
.caller
) )
287 * Build query list pane
291 buildQueryTable: function () {
292 var $table
, i
, length
, query
;
294 $table
= $( '<table>' ).attr( 'id', 'mw-debug-querylist' );
297 .append( $( '<th>' ).text( '#' ).css( 'width', '4em' ) )
298 .append( $( '<th>' ).text( 'SQL' ) )
299 .append( $( '<th>' ).text( 'Time' ).css( 'width', '8em' ) )
300 .append( $( '<th>' ).text( 'Call' ).css( 'width', '18em' ) )
303 for ( i
= 0, length
= this.data
.queries
.length
; i
< length
; i
+= 1 ) {
304 query
= this.data
.queries
[ i
];
307 .append( $( '<td>' ).text( i
+ 1 ) )
308 .append( $( '<td>' ).text( query
.sql
) )
309 .append( $( '<td>' ).text( ( query
.time
* 1000 ).toFixed( 4 ) + 'ms' ).addClass( 'stats' ) )
310 .append( $( '<td>' ).text( query
.function ) )
318 * Build legacy debug log pane
322 buildDebugLogTable: function () {
323 var $list
, i
, length
, line
;
326 for ( i
= 0, length
= this.data
.debugLog
.length
; i
< length
; i
+= 1 ) {
327 line
= this.data
.debugLog
[ i
];
329 .html( mw
.html
.escape( line
).replace( /\n/g, '<br />\n' ) )
337 * Build request information pane
341 buildRequestPane: function () {
343 function buildTable( title
, data
) {
344 var $unit
, $table
, key
;
346 $unit
= $( '<div>' ).append( $( '<h2>' ).text( title
) );
348 $table
= $( '<table>' ).appendTo( $unit
);
351 .html( '<th>Key</th><th>Value</th>' )
354 for ( key
in data
) {
356 .append( $( '<th>' ).text( key
) )
357 .append( $( '<td>' ).text( data
[ key
] ) )
365 .text( this.data
.request
.method
+ ' ' + this.data
.request
.url
)
366 .append( buildTable( 'Headers', this.data
.request
.headers
) )
367 .append( buildTable( 'Parameters', this.data
.request
.params
) );
371 * Build included files pane
375 buildIncludesPane: function () {
376 var $table
, i
, length
, file
;
378 $table
= $( '<table>' );
380 for ( i
= 0, length
= this.data
.includes
.length
; i
< length
; i
+= 1 ) {
381 file
= this.data
.includes
[ i
];
383 .append( $( '<td>' ).text( file
.name
) )
384 .append( $( '<td>' ).text( file
.size
).addClass( 'nr' ) )